import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { liveStreamAPI } from '../services/api';
import { LiveStream } from '../types';

const LiveStreams: React.FC = () => {
  const [liveStreams, setLiveStreams] = useState<LiveStream[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    fetchLiveStreams();
  }, []);

  const fetchLiveStreams = async () => {
    try {
      setLoading(true);
      const streams = await liveStreamAPI.getLiveStreams();
      setLiveStreams(streams);
    } catch (error: any) {
      setError(error.message || '获取直播列表失败');
    } finally {
      setLoading(false);
    }
  };

  const handleLike = async (streamId: number) => {
    try {
      await liveStreamAPI.likeLiveStream(streamId);
      // 更新本地状态
      setLiveStreams(prev => prev.map(stream => 
        stream.id === streamId ? { ...stream, likes: stream.likes + 1 } : stream
      ));
    } catch (error: any) {
      console.error('点赞失败:', error);
    }
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 md:mb-8">
        <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 sm:mb-0">直播列表</h1>
        <Link to="/live/create" className="btn btn-primary px-6 py-3 text-sm md:text-base w-full sm:w-auto">
          开始直播
        </Link>
      </div>
      
      {loading && (
        <div className="text-center py-8">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">加载中...</p>
        </div>
      )}
      
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6">
          {error}
        </div>
      )}
      
      {!loading && liveStreams.length === 0 && (
        <div className="text-center py-8 px-4">
          <div className="text-4xl md:text-6xl mb-4">📺</div>
          <h3 className="text-lg md:text-xl font-medium text-gray-900 mb-2">暂无直播</h3>
          <p className="text-gray-600 mb-4">成为第一个开始直播的人吧！</p>
          <Link to="/live/create" className="btn btn-primary px-6 py-3 text-sm md:text-base">
            开始第一个直播
          </Link>
        </div>
      )}
      
      {!loading && liveStreams.length > 0 && (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-6">
          {liveStreams.map((stream) => (
            <div 
              key={stream.id} 
              className="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow duration-200"
            >
              <div className="aspect-video bg-gray-200 relative">
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                <div className="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
                  LIVE
                </div>
                <div className="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded">
                  {stream.viewers || 0} 观看
                </div>
              </div>
              <div className="p-3 md:p-4">
                <h3 className="font-medium text-gray-900 mb-1 md:mb-2 line-clamp-2 text-sm md:text-base">
                  {stream.title}
                </h3>
                <p className="text-xs md:text-sm text-gray-500 mb-2 md:mb-3 line-clamp-2">
                  {stream.description}
                </p>
                <div className="flex items-center justify-between text-xs text-gray-400 mb-3">
                  <span>{stream.username || '未知用户'}</span>
                  <button 
                    onClick={() => handleLike(stream.id)}
                    className="flex items-center space-x-1 hover:text-red-500 active:scale-95 transition-transform"
                  >
                    <span>👍</span>
                    <span>{stream.likes || 0}</span>
                  </button>
                </div>
                <Link 
                  to={`/live/${stream.id}`}
                  className="block w-full text-center bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition-colors text-sm md:text-base"
                >
                  观看直播
                </Link>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default LiveStreams; 